<mat-list-item [@item]="itemState" [taskDraggable]="true" [draggedClass]="'drag-start'" [dragTag]="'task-item'" [dragData]="item" (click)="onEditTask()" [ngClass]="{'normal': item.priority===3,'important': item.priority===2,'emergency': item.priority===1}">
    <mat-checkbox (click)="onCkeckBox($event)" class="completion-status" [checked]="item.completed"></mat-checkbox>
    <div mat-line [ngClass]="{'completed': item.completed}" class="content">
        <span [matTooltip]="item.desc">{{item.desc}}</span>
    </div>
    <div mat-line class="bottom-bar" *ngIf="item.dueDate">
        <span class="due-date">{{item.dueDate | date:"yy-MM-dd"}}</span>
        <ng-template [ngIf]="item.reminder">
            <mat-icon class="alarm">alarm</mat-icon>
        </ng-template>
        <!-- <mat-icon *ngIf="item.reminder" class="alarm">alarm</mat-icon> -->
    </div>
    <mat-icon [svgIcon]="avator" class="avator" mat-list-avator></mat-icon>
</mat-list-item>